<template>
    <div class="app-container">
        <div class="card">
            <el-card>
                <div class="card-body">
                    <div class="search">
                        <el-icon>
                            <Search />
                        </el-icon>
                        <span>筛选搜索</span>
                    </div>
                    <div>
                        <el-button type="primary" @click="onSearch">查询搜索</el-button>
                    </div>
                </div>
                <el-form label-width="125px" :model="serachVal">
                    <el-form-item label="账号/姓名:">
                        <el-input label-width="150px" v-model="serachVal.keyword" placeholder="品牌名称或关键字" />
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <!-- 数据列表 -->
        <div class="list">
            <el-card>
                <div class="list-card">
                    <div class="data">
                        <el-icon :size="16">
                            <Tickets />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <el-button @click="addRole" type="primary">添加</el-button>
                </div>
            </el-card>
        </div>
        <el-table :data="tabList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="adminCount" label="用户数" />
            <el-table-column prop="createTime" label="添加时间">
                <template #default="{ row }">
                    {{ dayjs(row.createTime).format("YYYY/MM/DD:mm:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template #default="{ row }">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                        @click="switchStatus({ id: row.id, status: row.status })" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="allocMenu(row.id)">分配菜单</el-button>
                    <el-button link type="primary" size="small">分配资源</el-button>
                    <el-button link type="primary" size="small"
                        @click="openAllocationVisable({ adminCount: row.adminCount, createTime: row.createTime, description: row.description, id: row.id, sort: row.sort, status: row.status, name: row.name })">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <AllocationDlg :allocationVisable="allocationVisable" @closeAllocationVisable="closeAllocationVisable"
        @getAdminList="getAdminList" :itemInfo="itemInfo" />
</template>

<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { dayjs, ElMessage } from 'element-plus'
import * as http from "@/request/http"
import umsTable from "@/hooks/umsTable"
import AllocationDlg from "./components/allocationDlg.vue"
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter()
const serachVal = reactive({
    keyword: ""
})

const { tabList,
    paginationParams,
    handleSizeChange,
    handleCurrentChange,
    getAdminList } = umsTable(http.role.roleList, serachVal)

const onSearch = () => {
    getAdminList()
}

const switchStatus = (row: { id: number, status: string }) => {
    http.role.updateRoleStatusById(row).then(res => {
        if (res.code === 200) {
            ElMessage.success("修改状态成功")
            getAdminList()
        } else {
            ElMessage.error(res.message)
            row.status = row.status === "0" ? "1" : "0"
        }
    }).catch(() => {
        row.status = row.status === "0" ? "1" : "0"
        ElMessage.error("修改状态失败")
    })
}

//添加角色
const addRole = () => {
    itemInfo.value.id = 0
    allocationVisable.value = true
}

// 打开编辑分配角色
const itemInfo = ref<IAllocationParamsModel>({
    adminCount: 0,
    createTime: "",
    description: "string",
    id: 0,
    name: "",
    sort: 0,
    status: 0
})
const allocationVisable = ref(false)
const openAllocationVisable = (row: IAllocationParamsModel) => {
    itemInfo.value.adminCount = row.adminCount;
    itemInfo.value.createTime = row.createTime;
    itemInfo.value.description = row.description;
    itemInfo.value.id = row.id;
    itemInfo.value.name = row.name;
    itemInfo.value.sort = row.sort;
    itemInfo.value.status = row.status;
    allocationVisable.value = true
}
const closeAllocationVisable = () => {
    allocationVisable.value = false
}
// 分配菜单
const allocMenu = (id: number) => {
    router.push({
        path: "allocMenu",
        query: {
            id
        }
    })
}
// //分配资源
// const allocResource = (id: number) => {
//     router.push(`allocResource?id=${id}`)
// }
</script>

<style scoped lang="less">
.el-button {
    font-size: 12px;
}

.el-pagination {
    padding: 20px 20px;
    float: right;
}

.app-container {
    padding: 70px 20px 20px 20px;
}

.el-table--border {
    margin-top: 20px;
    text-align: center;
}

.card {
    margin: 30px 0;

    .card-body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search {
            display: flex;
            align-items: center;
        }

        .el-icon {
            padding-right: 10px;
        }
    }

    .el-form {
        margin-top: 20px;

        .el-input {
            width: 200px;
            font-size: 12px;
        }
    }

}

.list {
    margin-top: 30px;

    .list-card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .data {
            display: flex;
            align-items: center;
            font-size: 14px;

            .el-icon {
                padding-right: 10px;
            }
        }
    }
}
</style>